<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
            table{
            border-collapse: collapse;
            width: 500px;
        }
        
        table tr td,
        table tr th {
            border: 1px solid rgb(27, 24, 24);
        }
        .icon img{
            width: 20px;
            height: 20px;
        }
        .icon{
            margin-left: 15px;
        }
    </style>
</head>

<body>
    <div id="app">
        <input type="text" placeholder="新手机名称" v-model="phone_name">
        <input type="text" placeholder="价格"  v-model="phone_much">
        <button @click="addphone">添加</button>
        <table>
            <tr>
                <td>序号</td>
                <td>价格</td>
                <td>名称</td>
                <td>操作</td>
                <td>小结<span class="icon" >
                    <img src="./up.jpg!w1024_new_0" alt="" @click="moneysort_up" v-if="sortee">
                    <img src="./down.webp" alt="" @click="moneysort_down" v-if="!sortee">
                </span></td>
                <td>删除</td>
            </tr>
            <tr v-for="(item,index) in cart">
                <td>{{item.id}}</td>
                <td>{{item.price}}</td>
                <td>{{item.name}}</td>
                <td><button @click="add(index)">+</button><button @click="sub(index)">-</button></td>
                <td>{{item.price*item.num}}</td>
                <td><button @click="dell(index)">x</button></td>
            </tr>
        </table>
        <div> {{totil()}}</div>
    </div>
    <script src="./vue.js"></script>
    <script>
         var app = new Vue({
            el: "#app",
            data: {
                cart: [{
                    id: 1,
                    name: '小米',
                    price: 100,
                    num: 1,
                    money:100
                }, {
                    id: 2,
                    name: '华为',
                    price: 200,
                    num: 1,
                    money:200
                }, {
                    id: 3,
                    name: '联想',
                    price: 300,
                    num: 1,
                    money:300
                }],
                total:0,
                sortee:true,
                newobj:{},
                phone_name:"",
                phone_much:""
            },
            methods:{
                dell(index){
                    this.cart.splice(index,1)
                },
                add(index){
                    this.cart[index].num++
                    this.cart[index].money=this.cart[index].num*this.cart[index].price
                },
                sub(index){
                    this.cart[index].num--
                    this.cart[index].money=this.cart[index].num*this.cart[index].price
                },
                totil(){
                    var sum=0
                    this.cart.forEach(ele => {
                        sum+=ele.num*ele.price
                    });
                    this.total=sum
                    return sum
                },
                moneysort_up(){
            
                this.cart = this.cart.sort((a, b) => a.money - b.money)
                this.sortee=false
                },
                moneysort_down(){
                    this.cart = this.cart.sort((a, b) => a.money - b.money).reverse()
                    this.sortee=true
                },
                addphone(){
                    this.cart.push({ id: this.cart.length+1, name: this.phone_name, price: this.phone_much,num:1,money:this.phone_much})
                    this.phone_name=""
                    this.phone_much=""
                    console.log(11);
                }   
                
            }
        })
    </script>
</body>

</html>